import { useState, } from 'react'
import { Modal, Button, Form, Input, Select, message } from 'antd';
import React from 'react'
import type { FormInstance } from 'antd/es/form';
import axios from 'axios'

export default function AddOrder() {
    const [openOrder, setOpenOrder] = useState(false);
    const [initialValuesOrder,] = useState({});
    const formRef = React.useRef<FormInstance>(null);
    const [messageApi,] = message.useMessage();
    const showModalOrder = () => {
        setOpenOrder(true);
    };
    const onCancelOrder = () => {
        setOpenOrder(false);
    };
    const onFinishOrder = (values: any) => {
        let params = {
            values: values
        }
        axios.post("http://localhost:8080/api/addOrder", params).then((response: any) => {
            if (response.code === 200) {
                messageApi.open({
                    type: 'success',
                    content: '订单创建成功！',
                });
            }
        }).catch((err) => {
            messageApi.open({
                type: 'error',
                content: err.message,
            });
        });
        onFillOrder(0)
        setOpenOrder(false);
    };
    const onFillOrder = (num: number) => {
        let templateValue = {
            orderID: 100202303261320,
            user: "一叶知秋",
            phone: "15784923846",
            address: "宁夏回族自治区银川市兴庆区南薰东街南门楼附近",
            commodityName: '戈斯曼尚品干红葡萄酒',
            commodityNum: 2,
            commodityPrice: 388,
            orderState: "2",
        }
        let resetVaule = {
            orderID: undefined,
            user: undefined,
            phone: undefined,
            address: undefined,
            commodityName: undefined,
            commodityNum: undefined,
            commodityPrice: undefined,
            orderState: undefined,
        }
        let fillData = {}
        // 0新建，1默认传值，2一键填充
        switch (num) {
            case 0: fillData = resetVaule; break;
            case 1: fillData = templateValue; break;
            default:
                break;
        }
        formRef.current?.setFieldsValue(fillData);
    };

    return (
        <div className='addOrder'>
            <Button onClick={showModalOrder}>新增订单</Button>
            <Modal
                title="新增订单"
                open={openOrder}
                onCancel={onCancelOrder}
                footer={[
                    <Button key="cancel" onClick={onCancelOrder}>
                        取消
                    </Button>,
                    <Button key="submit" form="myForm" htmlType="submit">
                        提交
                    </Button>,
                ]}
            >
                <Form
                    id="myForm"
                    onFinish={onFinishOrder}
                    initialValues={initialValuesOrder}
                    ref={formRef}
                >
                    <Form.Item label="订单id" name="orderID">
                        <Input />
                    </Form.Item>
                    <Form.Item label="用户" name="user">
                        <Input />
                    </Form.Item>
                    <Form.Item label="联系方式" name="phone">
                        <Input />
                    </Form.Item>
                    <Form.Item label="地址" name="address">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品名称" name="commodityName">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品数量" name="commodityNum">
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品价格" name="commodityPrice">
                        <Input />
                    </Form.Item>
                    <Form.Item label="订单状态" name="orderState">
                        <Select>
                            <Select.Option value="1">待支付</Select.Option>
                            <Select.Option value="2">已支付未发货</Select.Option>
                            <Select.Option value="3">已发货</Select.Option>
                            <Select.Option value="4">已签收</Select.Option>
                            <Select.Option value="5">退换货中</Select.Option>
                        </Select>
                    </Form.Item>
                    <Button type="link" htmlType="button" onClick={() => onFillOrder(1)}>
                        一键填充
                    </Button>
                </Form>
            </Modal>
        </div>
    )
}
